﻿<template>
  <base-container>
    <!-- 搜索栏 -->
    <avue-table-search
      :option="searchOption"
      v-model="searchParams"
      @search-change="loadTableSearch"
      @search-reset="loadTableSearchReset"
    />
    <!-- 卡片容器 -->
    <base-table-card>
      <avue-crud
        ref="avueCrudRef"
        :option="tableOption"
        :data="tableData"
        v-model="formData"
        :page="page"
        :table-loading="tableLoading"
        @refresh-change="loadGetTableData"
        @current-change="loadTablePageChange"
        @size-change="loadTablePageSizeChange"
      >
      </avue-crud>
    </base-table-card>
  </base-container>
</template>

<script setup>
  import useCrudHook from "avue-table/useCrudHook";
  import Option from "@/crudOption/application/consumptionDetails";
  import { useRoute } from "vue-router";

  onMounted(async () => {
    const route = useRoute();
    // console.log("🚀 ~ route:", route);
    searchParams.value.serviceId = route.query.serviceId;
    searchParams.value.tenantId = route.query.tenantId;
    // 获取表格数据
    loadGetTableData();
  });

  // avue-crud 组件实例
  const avueCrudRef = ref({});

  // 增删改查 hook
  let {
    data: tableData,
    loading: tableLoading,
    page: page,
    search: searchParams,
    form: formData,
    get: loadGetTableData,
    pageNumChange: loadTablePageChange,
    pageSizeChange: loadTablePageSizeChange,
    searchReset: loadTableSearchReset,
    searchChange: loadTableSearch,
  } = useCrudHook({
    get: Api.application.feeDetail,
    dataRes: "data.records",
    getParamsFormat: params => {
      // 消费时间
      console.log("🚀 ~ params:", params);
      if (params.createTime && params.createTime.length === 2) {
        params.execBeginTime = `${params.createTime[0]} 00:00:00`;
        params.execEndTime = `${params.createTime[1]} 23:59:59`;
        delete params.createTime;
      }
      // 返回查询参数
      return params;
    },
  });

  // 获取 搜索配置 和 表格配置
  const { searchOption, tableOption } = Option(formData);
</script>

<style lang="scss" scoped></style>
